<template>
  <el-dialog :visible.sync="isShow" width="600px" class="addSub">
    <div slot="title" class="title">{{ mode=='add'? '新增学科':'编辑学科'}}</div>
    <!-- 表单区域 -->
    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="学科编号" prop="rid">
        <el-input v-model="form.rid"></el-input>
      </el-form-item>
      <el-form-item label="学科名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="学科简称" prop="short_name">
        <el-input v-model="form.short_name"></el-input>
      </el-form-item>
      <el-form-item label="学科简介" prop="intro">
        <el-input v-model="form.intro"></el-input>
      </el-form-item>
      <el-form-item label="学科备注" prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="footer">
      <el-button @click="isShow = false">取消</el-button>
      <el-button type="primary" @click="submit">新增</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addSubject, editSubject } from "@/api/subject.js";
export default {
  data() {
    return {
      isShow: false,
      mode: "add",
      form: {
        rid: "", //	是	string	学科编号
        name: "", //	是	string	学科名称
        short_name: "", //	否	string	学科简称
        intro: "", //	否	string	学科简介
        remark: "", //	否	string	备注
      },
      rules: {
        rid: [{ required: true, message: "请输入学科编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入学科名称", trigger: "blur" }],
      },
    };
  },
  watch: {
    isShow(newVal) {
      if (newVal == false) {
        //   表单的手动重置
        this.form = {
          rid: "", //	是	string	学科编号
          name: "", //	是	string	学科名称
          short_name: "", //	否	string	学科简称
          intro: "", //	否	string	学科简介
          remark: "", //	否	string	备注
        }
      }
      this.$nextTick(()=>{
        //   清除表单的验证
          this.$refs.form.clearValidate();
      })
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((res) => {
        if (res) {
          if (this.mode == "add") {
            addSubject(this.form).then(() => {
              this.$message.success("新增成功");
              this.isShow = false;
              this.$parent.search();
            });
          } else if (this.mode == "edit") {
            editSubject(this.form).then(() => {
              this.$message.success("编辑成功");
              this.isShow = false;
              this.$parent.search();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.addSub {
  .title {
    height: 53px;
    line-height: 53px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #01c4fa, #1394fa);
  }
  .footer {
    text-align: center;
  }
}
</style>